import React from 'react';
import Taro from '@tarojs/taro';

import { connect } from 'react-redux';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';

import { View, Text, Image, ScrollView } from '@tarojs/components';
import './index.less';
import moment from 'dayjs';
import qIcon from './components/img/q.png';
import sIcon from './components/img/s.png';
import btn from './components/img/btn.png';
import phoneIcon from './components/img/phone.png';

actions().actions.loadReducer();

// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class ProxyDetailsD extends React.Component<Partial<T.IProps>, any> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidShow() {
    this.props.actions.init();
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  //图片渲染
  renderImg(list) {
    let listView = [];
    let urls = [];
    if (list.length > 0) {
      list.map((item, index) => {
        if (item == '') {
          return;
        }
        urls.push(item);
        listView.push(
          <Image
            key={index}
            onClick={(e) => {
              e.stopPropagation();
              this.onImageClick(item, urls);
            }}
            src={item}
            mode="aspectFill"
            className="user-img"
          />,
        );
      });
    }
    return listView;
  }
  onImageClick = (item, urls) => {
    this.previewImage(item, urls);
  };
  previewImage = (img, files) => {
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls: files, // 需要预览的图片http链接列表
    });
  };

  render() {
    if (!this.props.main) return null;
    let {
      main: { isLoading, detail },
      actions: { action },
    } = this.props;

    return (
      <View className="pageProxyDetailsD">
        <ScrollView scrollY style={{ flex: 1, height: '100%' }}>
          <View>
            <View className="card-box">
              <View>
                <View className="time-price-box">
                  <Text className="time">
                    {moment(detail.deliveryDate).format('YYYY-MM-DD') == moment(new Date()).format('YYYY-MM-DD')
                      ? '今天'
                      : moment(detail.deliveryDate).format('MM-DD')}
                    ｜{moment(detail.deliveryDate + ' ' + detail.deliveryTimeBegin).format('HH:mm')}-{moment(moment(detail.deliveryDate).format('YYYY-MM-DD') + ' ' + detail.deliveryTimeEnd).format('HH:mm')}
                    <Text> 送达</Text>
                  </Text>
                  <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                    {/* <Text style={{fontSize: 14, color: '#FE3831', fontWeight: 'bold'}}>¥</Text>
                  <Text className="price">{detail.price}</Text> */}
                    <Text className="price">{detail.points}</Text>
                    <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold', marginLeft: '10rpx' }}>积分</Text>
                  </View>
                </View>
                <View style={{ margin: '19px 0' }}>
                  <View className="needle-box">
                    <View style={{ alignItems: 'center' }}>
                      <Image className="q-icon" src={qIcon} mode="widthFix" />
                      <View className="dashed-border" />
                    </View>
                    <View style={{ marginLeft: 7 }}>
                      <View style={{ display: '-webkit-box' }} className="line-two">
                        <Text className="addr">
                          {detail.communityName}｜{detail.courierStationName}
                        </Text>
                      </View>
                      <View style={{ display: '-webkit-box' }} className="line-one">
                        <Text className="addr-info">{detail.communityAddress}</Text>
                      </View>
                    </View>
                  </View>
                  {/* <Text className="distance">4.3km</Text> */}
                  <View className="needle-box">
                    <View style={{ alignItems: 'center' }}>
                      <View className="dashed-border" />
                      <Image className="s-icon" src={sIcon} mode="widthFix" />
                    </View>
                    <View style={{ marginLeft: 7, marginTop: 50 }}>
                      <View style={{ display: '-webkit-box' }} className="line-two">
                        <Text className="addr">
                          {detail.city}
                          {detail.area}
                          {detail?.street}
                          {detail.deliveryAddress}
                        </Text>
                      </View>
                    </View>
                  </View>
                </View>

                <View className="contact">
                  <Text className="contact-name">{detail.consigneeName}</Text>
                  <Text className="contact-phone">{detail.consigneeNumber}</Text>
                  <Image
                    className="contact-icon"
                    src={phoneIcon}
                    mode="widthFix"
                    onClick={(e) => {
                      e.stopPropagation();
                      Taro.makePhoneCall({ phoneNumber: detail.consigneeNumber })
                    }} />
                </View>

                <View className="details">
                  <Text className="details-text">{detail.requirement}</Text>
                </View>
                {detail.img && <>{this.renderImg(detail.img.split(';'))}</>}
              </View>
            </View>

            <View className="card-box" style={{ marginBottom: '20vh' }}>
              <View className="time-price-box">
                <Text className="revenue">订单配送收入</Text>
                <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                  {/* <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold' }}>¥</Text> */}
                  <Text className="price" style={{ fontSize: 16 }}>{detail.points}</Text>
                  <Text style={{ fontSize: 14, color: '#FE3831', fontWeight: 'bold', marginLeft: '10rpx' }}>积分</Text>
                </View>
              </View>
              <View className="time-price-box" style={{ margin: '24px 0' }}>
                <Text className="price-info">基础服务费</Text>
                <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                  {/* <Text style={{ fontSize: 12, color: '#999', fontWeight: 'bold' }}>¥</Text> */}
                  <Text className="price-g">{detail.basePrice}</Text>
                  <Text style={{ fontSize: 12, color: '#999', fontWeight: 'bold', marginLeft: '10rpx' }}>积分</Text>
                </View>
              </View>
              <View className="time-price-box">
                <Text className="price-info">时段加价</Text>
                <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                  {/* <Text style={{ fontSize: 12, color: '#999', fontWeight: 'bold' }}>¥</Text> */}
                  <Text className="price-g">{detail.timeRaise}</Text>
                  <Text style={{ fontSize: 12, color: '#999', fontWeight: 'bold', marginLeft: '10rpx' }}>积分</Text>
                </View>
              </View>
            </View>
          </View>
        </ScrollView>
        <View className="props-bottom">
          <Image
            className="btn-icon"
            src={btn}
            mode="widthFix"
            onClick={() => {
              Taro.showModal({
                content: '确认接单吗?',
                success: function (res) {
                  if (res.confirm) {
                    action.escortsnatchorderAdd(detail.id);
                  } else if (res.cancel) {
                    console.log('用户点击取消');
                  }
                },
                confirmColor: '#218CFF'
              });
            }}
          />
        </View>
      </View>
    );
  }
}
